<template>
	<div class="myintergralwrap addermeswrap">
		<div class="myintergralwrap-title addermes-title">地址管理<span>
				<router-link to="/myself/addermes/addnewaddress">添加新地址</router-link>
			</span></div>
		<div class="addresstable">
		<table v-if="oraddress==1">
			<tr class="tabletitle">
				<th>收货人</th>
				<th>所在区域</th>
				<th>街道地址</th>
				<th>联系电话</th>
				<th>备注</th>
				<th>操作</th>
			</tr>
			<tr v-for="data in datas" :key="data.addressid" :addressid="data.addressid">
				<th>{{data.name}}</th>
				<th>{{data.city}}</th>
				<th>{{data.street}}</th>
				<th>{{data.phone}}</th>
				<th>{{data.beizhu}}</th>
				<th class="caozuo">
						<span v-show="data.state==2" @click="morenaddress">设为默认地址</span>
						<span><router-link to="">修改</router-link>
						</span><span @click="addressdeleat">删除</span>
				</th>
			</tr>
		</table>
		</div>
		<div class="noadder" v-if="oraddress==2"><i class="iconfont icon-weibiaoti-"></i><span>暂无收获地址,请点击</span><span class="addnewaddress"><router-link to="/myself/addermes/addnewaddress">添加新地址</router-link></span></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				datas:null,
				oraddress:null,
			
			}
		},
		created(){
			var _this=this;
			var userphone=localStorage.getItem("userphone");
			this.$axios.post("http://localhost:3000/userinfor/address",{userphone:userphone})
			.then(function(response){
				var list=response.data;
				// window.console.log(list);
				if(list.code==200){
					if(list.data.length==0){
						_this.oraddress=2
					}else{
						_this.oraddress=1;
						_this.datas=list.data;
						// window.console.log(_this.datas);
					}
				}
			}).catch(function (error) {
				window.console.log(error);
			})
		},
		methods:{
			//地址删除
			addressdeleat(e){
				var addressid=e.target.parentElement.parentElement.getAttribute('addressid');
				this.$axios.post("http://localhost:3000/userinfor/addressdeleat",{addressid:addressid})
				.then(function(response){
					var list=response.data;
					if(list.code==200){
						alert('删除成功')
						location.reload()
					}
				}).catch(function (error) {
					window.console.log(error);
				})
			},
			//默认地址修改
			morenaddress(e){
				var userphone=localStorage.getItem("userphone");
				var addressid=e.target.parentElement.parentElement.getAttribute('addressid');
				this.$axios.post("http://localhost:3000/userinfor/morenaddress",{addressid:addressid,userphone:userphone})
				.then(function(response){
					var list=response.data;
					if(list.code==200){
						location.reload()
					}
				}).catch(function (error) {
					window.console.log(error);
				})
			}
		}
	}
</script>

<style>
	.addermes-title span {
		float: right;
		margin-right: 3%;
		width: 90px;
		height: 30px;
		line-height: 30px;
		margin-top: 12px;
		text-align: center;
		font-size: 14px;

		background: #2E9E3B;
	}

	.addermes-title span a {
		color: white;
	}

	.addermeswrap table {
		width: 94%;
		margin-left: 3%;
		border-collapse: collapse;
		border-spacing: 1;
		border-spacing: 0;
		border: 1px solid #c1c1c1;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.addermeswrap table tr {
		height: 42px;
		border-bottom: 1px solid #c1c1c1;
		color: #adadad;
		text-align: center;
	}
	.addermeswrap table tr span {
		float: left;
		padding-right: 3px;
		border-right: 1px solid #00B066;
		cursor: pointer;
		margin: auto;
	}

	.addermeswrap table tr span:nth-of-type(1) {
		color: #f29642;
	}

	.addermeswrap table a {
		color: #00B066;
	}

	.addermeswrap table tr span:nth-last-of-type(1) {
		border: none;
		color: #00B066;
	}

	.tabletitle {
		background: #c1c1c1;
	}
	.noadder{
		width: 100%;
		height: 566px;
		line-height: 566px;
		text-align: center;
	}
	
	.noadder span,.noadder i{
		float: left;
	}
	.noadder i{
		width: 34px;
		height: 34px;
		font-size: 34px;
		color: #f08200;
		margin-left: 30%;
		margin-right: 1%;
	}
	.noadder .addnewaddress{
		float: left;
		width: 90px;
		height: 30px;
		line-height: 30px;
		margin-top: 266px;
		background: #00B066;
		border-radius: 5px;
		margin-left: 1%;
	}
	.noadder .addnewaddress a{
		color: white;
	}
	.addresstable{
		width: 100%;
		height: 540px;
	}
</style>
